import React, { Component } from 'react'

export default class Demo extends Component {

    state = {count:0}

    increment = ()=>{
        // 常规的写法
        // const {count} = this.state;
        // this.setState({count:count+1})
        /* 拓展1：实际上，setState可以传入第二个参数，更新完state之后的回调函数
            同时需要注意的是，setState方法虽然是同步的，但是之后更新状态这个动作是异步的，
            所以要想在状态更新后去做一些特殊的动作，那么就有必要放在回调函数中去执行
        
        const {count} = this.state;
        this.setState({count:count+1},()=>{
            console.log(this.state.count);
        })*/
        /**
         * 拓展2：setState（的第一个参数）不只是可以传入一个对象，还可以是一个函数，函数的入参可以自动获取到state
         * 我们之前之间传入一个对象，其实可以看成是这种函数写法的简写方式
         */
        this.setState(state=>({count:state.count+1}),()=>{
            console.log(this.state.count)
        });
    }

    render() {
        return (
            <div>
                当前的数值为: {this.state.count}
                <br/>
                <button onClick={this.increment}>点我+1</button>
            </div>
        )
    }
}
